<script setup>
import { ref } from 'vue'
import ChannelSelect from '@/views/book/components/ChannelSelect.vue'
import { ElMessage } from 'element-plus'
import { addBook,updateBook } from '@/api/book'

// 控制抽屉显示隐藏
const visibleDrawer = ref(false)

// 默认图书表单数据
const defaultForm = {
  name: '',         // 图书名称
  categoryId: '',   // 分类ID
  price: ''         // 价格
}

// 表单数据模型
const formModel = ref({ ...defaultForm })

// 提交成功事件
const emit = defineEmits(['success'])

// 提交图书信息（添加或编辑）
const onPublish = async () => {
  try {
    if (formModel.value.id) {
      // 编辑操作（示例：调用 editBookService）
       await updateBook(formModel.value)
      ElMessage.success('修改成功')
    } else {
      // 添加操作（示例：调用 addBookService）
      await addBook(formModel.value)
      ElMessage.success('添加成功')
    }

    visibleDrawer.value = false
    emit('success', formModel.value.id ? 'edit' : 'add')
  } catch (error) {
    ElMessage.error('提交失败，请重试')
    console.error(error)
  }
}

// 组件对外暴露 open 方法，用于打开抽屉并传参
const open = (row = {}) => {
  visibleDrawer.value = true

  if (row.id) {
    // 如果有 id，表示是编辑模式
    formModel.value = { ...row }
  } else {
    // 否则是添加模式，初始化默认值
    formModel.value = { ...defaultForm }
  }
}

defineExpose({
  open
})
</script>

<template>
  <el-drawer
    v-model="visibleDrawer"
    :title="formModel.id ? '编辑图书' : '添加图书'"
    direction="rtl"
    size="50%"
  >
    <!-- 图书表单 -->
    <el-form :model="formModel" label-width="100px">
      <el-form-item label="图书名称" prop="name">
        <el-input v-model="formModel.name" placeholder="请输入图书名称"></el-input>
      </el-form-item>
      <el-form-item label="图书分类" prop="categoryId">
        <channel-select
          v-model="formModel.categoryId"
          width="100%"
        ></channel-select>
      </el-form-item>
      <el-form-item label="图书价格" prop="price">
        <el-input v-model.number="formModel.price" placeholder="请输入价格（如：29.9）"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onPublish" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="scss" scoped></style>
